/**
 * Created by xxx on 2017年9月26日.
 */
/**
 * Created by xxx on 2017/7/6.
 */
//用react封装
var currentpage = 1,totlepage = 1,i;//分页的当前页和总的页数
//表单的最高高度、当前第几页、总页数、总行数
var otherData = {pageLeft:0,pageRight:0};
//分页
var Page = React.createClass({
    setPage: function (e) {
        setPage($(e.target).html());
        this.props.onPageClick(1);
    },
    showPage: function () {
        showPage();
    },
    render: function () {
        {
            var items = [],
                svar = this;
            if(totlepage == 0 ){
                items.push({num:1,checked:true})
            }else if(totlepage < 6){
                for(i = 1;i <= totlepage ;i++) {
                    if (i == currentpage) {
                        items.push({num:i,checked:true})
                    } else {
                        items.push({num:i,checked:false})
                    }
                }
            }else if(currentpage >= (totlepage-2)) {//点在左边
                items.push({num:1,checked:false});
                items.push({num:'···',checked:false});
                for(i = totlepage-2;i <= totlepage ;i++){
                    if(i == currentpage){
                        items.push({num:i,checked:true})
                    }else{
                        items.push({num:i,checked:false})
                    }
                }
            }else if(currentpage <= 3){
                for(i = 1;i <= 3 ;i++) {
                    if (i == currentpage) {
                        items.push({num:i,checked:true})
                    } else {
                        items.push({num:i,checked:false})
                    }
                }
                items.push({num:'···',checked:false});
                items.push({num:totlepage,checked:false})
            }else {//点在两边
                items.push({num:1,checked:false});
                items.push({num:'···',checked:false});
                items.push({num:currentpage-1,checked:false});
                items.push({num:currentpage,checked:true});
                items.push({num:currentpage+1,checked:false});
                items.push({num:'···',checked:false});
                items.push({num:totlepage,checked:false})
            }
        }
        return (
            <div className="studentsInfo-page tableInfo-page">
                <div className="page-number">每页<span className="page-number-list" onClick={this.showPage}>{pagecount}</span>条</div>
                <div className="page-list" style={{top:pageListTop+"px"}}>
                    <ul>
                        {
                            pageList.map(function (item) {
                                return (<li onClick={svar.setPage}>{item}</li>)
                            })
                        }
                    </ul>
                </div>
                <div className="page-limit">
                    <ol className="page-limit-ol">
                        <li className="page-limit-img" name="-1" onClick={otherData.pageLeft == 0?'':svar.props.onPageClick.bind(svar,-1)} ><span className={otherData.pageLeft == 0?'page-limit-left-no':'page-limit-left-yes'}/></li>
                        {
                            items.map(function (item) {
                                return (<li onClick={isNaN(item.num)?'':svar.props.onPageClick.bind(svar,item.num)} className={item.checked == true?'page-limit-num page-limit-checked':'page-limit-num'} name={item.num}>{item.num}</li>)
                            })
                        }
                        <li className="page-limit-img" name="-2" onClick={otherData.pageRight == 0?'':svar.props.onPageClick.bind(svar,-2)}><span className={otherData.pageRight == 0?'page-limit-right-no':'page-limit-right-yes'}/></li>
                    </ol>
                </div>
            </div>
        );
    },
});
//表单组件
var Table = React.createClass({
    defaultImg(e){
        e.target.src = '../img/image/splitImg.jpg';
    },
    render: function () {
        return (
            <tr>
                <td style={{width: '10%'}}>{parseInt(this.props.listNumber)+1}</td>
                <td style={{width: '30%'}}>{this.props.trData.title}</td>
                <td style={{width: '15%'}}>{this.props.trData.userName}</td>
                <td style={{width: '15%'}}>{suixun.getNowFormatDate('yyyy-MM-dd HH:MM:SS',new Date(this.props.trData.createTime))}</td>
                <td style={{width: '10%'}}>{this.props.trData.isshow==0?'草稿':'已发布'}</td>
                <td style={{width: '20%'}}>
                    <div className='trButton trLeft clickDliver' onClick={this.props.onClickEdit}>编辑</div>
                    <div className="trButton trLeft table-select" onClick={this.props.onClickGetArticle}>预览</div>
                    <div className="trButton trLeft table-delete" onClick={this.props.onClickDelete}>删除</div>
                    {/*草稿的时候没有置顶与取消置顶*/}
                    {
                        this.props.trData.isshow==0?'':this.props.trData.up!=0?
                                <div className="trButton trLeft table-select trLong" onClick={this.props.onClickNoSetUp}>取消置顶</div>
                            :
                                <div className="trButton trLeft table-select" onClick={this.props.onClickSetUp}>置顶</div>
                    }
                    {
                        this.props.trData.isshow==0?
                                <div className="trButton trLeft table-select" onClick={this.props.isPublish}>发布</div>
                            :
                                <div className="trButton trLeft table-delete trLong" onClick={this.props.isPublish}>取消发布</div>
                    }
                    <div className="trButton trLeft table-select" onClick={this.props.commentReview}>评论</div>
                </td>
            </tr>
        );
    }
});
/**
 * sim表单
 * @type {*}
 */
var CommentTable = React.createClass({
    clickChecked: function () {
        var childsCheckBox = $(".table-select").children();
        var b = 0,a = 0;
        for(var i = 0;i<childsCheckBox.length;i++){
            var child = $($(childsCheckBox[i]).children()[0]).children();
            if($(child[0]).length == 0){
                a ++;
            }
            if($(child[0]).is(':checked')){
                b ++;
            }
        };
        if(b == childsCheckBox.length-a){
            $(".checkBox").prop('checked',true);
        }else{
            $('.checkBox').attr('checked',false);
        }
    },
    render: function () {
        return (
            <tr>
                <td style={{width: '8%'}}><input onClick={this.clickChecked} className="childCheckBox" data-value={this.props.trData.id} type="checkbox"/></td>
                <td style={{width: '12%'}}>{parseInt(this.props.listNumber)+1}</td>
                <td style={{width: '15%'}}>{this.props.trData.userName?this.props.trData.userName!='undefined'?this.props.trData.userName:'---':'---'}</td>
                <td style={{width: '20%'}}>{suixun.getNowFormatDate('yyyy-MM-dd HH:MM:SS',new Date(this.props.trData.createTime))}</td>
                <td style={{width: '30%'}}>{this.props.trData.content}</td>
                <td style={{width: '15%'}}><div className="trButton trLeft table-delete" onClick={this.props.onClickCommentDelete}>删除</div></td>
            </tr>
        );
    }
});
//父组件
var Main = React.createClass({
    //组件初始状态
    getInitialState: function () {
        return {
            otherData:this.props.otherData,
            tableData:[],//文章数据
            tablePageData: {},//文章分页信息
            commentData: [],//评论数据
            menuData:[{
                createTime: 1507684454000,
                del: 0,
                id: 0,
                pIndex: 2,
                tagname: "热点",
                userId: 1,
                select:true
            }],
            informationMenu:0,
            informationId:'',
            orderBy:'desc',//desc降序 asc升序
            navigation: '',//导航内容
            trArticle: []//选中行数据

        }
    },
    componentDidMount: function () {
        //获取资讯menu
        var svar = this;
        suixun.ajax(serverUrl+'/tag/listTag','',"get",function(data){//index:"'+this.state.informationMenu+'",
            if(data.code == 200){
                if(data.info.length>0){
                    for(var i = 0;i<data.info.length;i++){
                        data.info[i].select = false;
                        svar.state.menuData.push(data.info[i]);
                    }
                }
                svar.state.menuData.unshift();
                svar.setState({menuData:svar.state.menuData});
                suixun.hideLoding();//显示加载中
                svar.getTableDate(0,1);
            }else{
                suixun.alert(data.msg);
            }
        });

    },
    /**
     * 获取文章列表数据
     */
    getTableDate: function(index,page){
        var svar = this;
        var url = serverUrl+'/article/listArticle?page='+page+'&orderBy='+svar.state.orderBy+'&size='+pagecount+'&tagId='+index;
        if(index == 0){
            url = serverUrl+'/article/listArticle?page='+page+'&orderBy='+svar.state.orderBy+'&size='+pagecount;
        }
        suixun.showLoding();//显示加载中
        suixun.ajax(url,'',"get",function(data){
            suixun.hideLoding();//隐藏加载中
            if(data.code == 200){
                var getPageInfoTwo = suixun.getPageInfoTwo(page,data.info.pages);
                otherData.pageLeft = getPageInfoTwo.pageLeft;
                otherData.pageRight = getPageInfoTwo.pageRight;
                totlepage = getPageInfoTwo.totlepage;
                currentpage = page;
                if(data.info.list != null && data.info.list.length>0){
                    svar.setState({tableData:data.info.list,otherData:otherData,tablePageData:getPageInfoTwo});
                }else{
                    svar.setState({tableData:[],otherData:otherData});
                }
            }else{
                suixun.alert(data.msg);
            }
        });
    },
    /**
     * 获取评论列表数据
     * @param info 选中行数据
     */
    getCommonData: function(info,page){
        var svar = this;
        var url = serverUrl+'/article/getArticleCommentPage?page='+page+'&size='+pagecount+'&articleId='+info.id;
        suixun.showLoding();//显示加载中
        suixun.ajax(url,'',"get",function(data){
            suixun.hideLoding();//隐藏加载中
            if(data.code == 200){
                var getPageInfoTwo = suixun.getPageInfoTwo(page,data.info.pages);
                otherData.pageLeft = getPageInfoTwo.pageLeft;
                otherData.pageRight = getPageInfoTwo.pageRight;
                totlepage = getPageInfoTwo.totlepage;
                currentpage = page;
                if(data.info.list != null && data.info.list.length>0){
                    svar.setState({commentData:data.info.list,otherData:otherData});
                }else{
                    svar.setState({commentData:[],otherData:otherData});
                }
                new Viewer(document.querySelector('.head-body'));//调用图片
            }else{
                suixun.alert(data.msg);
            }
        });
    },
    /**
     * 分页
     * @param num
     */
    onPageClick: function (num) {
        if(num > 0){
            currentpage = num;
        }else if(num == -1 && currentpage > 1){
            currentpage --;
        }else if(num == -2  && currentpage < totlepage){
            currentpage ++;
        }
        if(this.state.navigation==''){
            this.getTableDate(this.state.informationMenu,currentpage);
        }else{
            this.getCommonData(this.state.trArticle,currentpage);
        }
    },
    /**
     * 排序查询
     * @param sort
     */
    timeSort: function (sort) {
        var svar = this;
        svar.setState({orderBy:sort});
        var url = serverUrl+'/article/listArticle?page='+currentpage+'&orderBy='+sort+'&size='+pagecount+'&tagId='+this.state.informationMenu;
        if(this.state.informationMenu == 0){
            url = serverUrl+'/article/listArticle?page='+currentpage+'&orderBy='+sort+'&size='+pagecount;
        }
        suixun.ajax(url,'',"get",function(data){
            if(data.code == 200){
                otherData = {pageLeft:0,pageRight:data.info.nextPage};
                currentpage = 1;totlepage = data.info.pages;//初始化的时候赋值：分页的当前页和总的页数
                if(data.info.list != null && data.info.list.length>0){
                    svar.setState({tableData:data.info.list,otherData:otherData});
                }else{
                    svar.setState({tableData:[],otherData:otherData});
                }
                new Viewer(document.querySelector('.head-body'));//调用图片
            }else{
                suixun.alert(data.msg);
            }
        });
    },
    /**
     * 删除资讯
     * @returns {XML}
     */
    onClickDelete: function (id) {
        var svar = this;
        suixun.confirm_noTit("是否确定删除？",function (data) {
            if(data){
                suixun.showLoding();//显示加载中
                var param = new FormData();
                param.append("id",id);
                param.append("del",1);
                suixun.ajax(serverUrl+'/article/updateArticle',param,"post",function(data){
                    suixun.hideLoding();//隐藏加载中
                    if(data.code == 200){
                        suixun.alert('操作成功!',function (data) {
                            if(data){
                                svar.onPageClick(currentpage);//更新数据
                            }
                        });
                    }else{
                        suixun.alert(data.msg);
                    }
                });
            }
        });
    },
    /**
     * 取消置顶
     * @returns {XML}
     */
    onClickNoSetUp: function (id) {
        var svar = this;
        suixun.confirm_noTit("是否取消置顶？",function (data) {
            if(data){
                suixun.showLoding();//显示加载中
                suixun.ajax(serverUrl+'/article/getGoods.json?articleId='+id,'',"get",function(data) {
                    suixun.hideLoding();//隐藏加载中
                    var uuid = '';
                    if(data.code == 200){
                        if(data.info){
                            for(var j = 0;j<data.info.length;j++){
                                if(uuid.indexOf(data.info[j].uuid)==-1){
                                    uuid += data.info[j].uuid+',';
                                }
                            }
                            uuid = uuid.substring(0,uuid.length-1);
                            svar.changeIsNoSetUp(id,uuid);
                        }else{
                            svar.changeIsNoSetUp(id,uuid);
                        }
                    }else{
                        suixun.alert(data.msg,function (data) {
                            if(data){
                                svar.changeIsNoSetUp(id,uuid);
                            }
                        });
                    }
                }.bind(this));
            }
        });
    },
    /**
     * 取消置顶
     */
    changeIsNoSetUp: function (id,goodsNumbers) {
        var svar = this;
        suixun.showLoding();//显示加载中
        var param = new FormData();
        param.append("id",id);
        param.append("up",0);
        if(goodsNumbers!=''){
            param.append("goodsNumbers",goodsNumbers);
        }
        suixun.ajax(serverUrl+'/article/updateArticle',param,"post",function(data){
            suixun.hideLoding();//隐藏加载中
            if(data.code == 200){
                suixun.alert('操作成功!',function (data) {
                    if(data){
                        svar.onPageClick(currentpage);//更新数据
                    }
                });
            }else{
                suixun.alert(data.msg);
            }
        });
    },
    /**
     * 置顶
     * @returns {XML}
     */
    onClickSetUp: function (id) {
        var svar = this;
        suixun.confirm_noTit("是否置顶？",function (data) {
            if(data){
                suixun.showLoding();//显示加载中
                suixun.ajax(serverUrl+'/article/setUp?articleId='+id,'',"get",function(data){
                    suixun.hideLoding();//隐藏加载中
                    if(data.code == 200){
                        suixun.alert('操作成功!',function (data) {
                            if(data){
                                svar.onPageClick(currentpage);//更新数据
                            }
                        });
                    }else{
                        suixun.alert(data.msg);
                    }
                });
            }
        });
    },
    /**
     * 编辑资讯
     * @returns {XML}
     */
    onClickEdit: function (info) {
        localStorage.informationId = info[0];
        window.open('./addInformation.html?informationId='+info[0]);
        // window.open('./addInformation.html?tagid='+info[1]+'&informationId='+info[0]);
        // window.location.href = './addInformation.html?tagid='+info[1]+'&informationId='+info[0];
    },

    /**
     * 新增资讯
     * @returns {XML}
     */
    onClickAdd: function () {
        localStorage.removeItem('informationId');
        window.open('./addInformation.html');
        // window.location.href = './addInformation.html';
    },
    /**
     * 点击菜单
     * @returns {XML}
     */
    onClickMenu: function (number) {
        for(var i = 0;i<this.state.menuData.length;i++){
            if(this.state.menuData[i].id == number){
                this.state.menuData[i].select = true;
            }else{
                this.state.menuData[i].select = false;
            }
        }
        this.setState({informationMenu:number,menuData:this.state.menuData});
        this.getTableDate(number,1);
    },

    /**
     *  预览
     * @returns {XML}
     */
    onClickGetArticle: function (id) {
        var svar = this;
        suixun.showLoding();//显示加载中
        suixun.ajax(serverUrl+'/article/getArticle?articleId='+id,'',"get",function(data){
            if(data.code == 200){
                svar.buttonPreview(id);//获取商品编号并预览
                svar.setState({informationId:id});
                var pre_layer = $(".preview-layer");
                var pre_bg = $(".preview-bg, .close");

                //预览图片居中样式
                var css_str = {};
                var pre_phone = $(".preview-phone");
                var pos_left = 0;
                var pos_top = 0;

                pre_bg.on("click",function(){
                    pre_layer.hide();
                });

                var ifr_document = document.getElementById("preview-html").contentWindow.document;
                if(ifr_document){
                    //设置标题
                    var ifr_title = $(ifr_document).find(".article-title .title");
                    ifr_title.html(data.info.title);
                    //设置作者
                    var ifr_author = $(ifr_document).find(".article-top .article-time");
                    ifr_author.html("文："+data.info.userName);
                    //设置阅读量
                    var ifr_readTotal = $(ifr_document).find(".article-top .readTotal");
                    ifr_readTotal.html(data.info.readCount);
                }
                //设置正文
                var ifr_content = $(ifr_document).find(".article-content");
                ifr_content.html(decodeURIComponent(data.info.content));

                pos_left = $(window).width() / 2 - pre_phone.width() / 2;
                pos_top = $(window).height() / 2 - pre_phone.height() / 2;
                css_str = {
                    left:pos_left + "px",
                    top:pos_top + "px"
                };
                pre_phone.css(css_str);
                setTimeout(function () {
                    suixun.hideLoding();//隐藏加载中
                    pre_layer.show();
                },200);
                //适应浏览器窗口大小变化
                $(window).resize(function () {
                    pos_left = $(window).width() / 2 - pre_phone.width() / 2;
                    pos_top = $(window).height() / 2 - pre_phone.height() / 2;
                    css_str = {
                        left:pos_left + "px",
                        top:pos_top + "px"
                    };
                    pre_phone.css(css_str);
                });
            }else{
                suixun.hideLoding();//隐藏加载中
                suixun.alert(data.msg);
            }
        });
    },
    /**
     * 点击预览
     */
    buttonPreview: function (articleId) {
        suixun.showLoding();//隐藏加载中
        var ifr_document = document.getElementById("preview-html").contentWindow.document;
        if(ifr_document){
            $(ifr_document).find(".goods-image").html('');//商品编号图片
        }
        suixun.ajax(serverUrl+'/article/getGoods.json?articleId='+articleId,'',"get",function(data) {
            suixun.hideLoding();//隐藏加载中
            if(data.code == 200){
                if(data.info){
                    var uuid = '';
                    for(var j = 0;j<data.info.length;j++){
                        if(uuid.indexOf(data.info[j].uuid)==-1){
                            uuid += data.info[j].uuid+',';
                        }
                    }
                    uuid = uuid.substring(0,uuid.length-1);
                    suixun.showLoding();//显示加载中
                    suixun.ajax(serverUrl+'/credits/goods/archives/getGoods.json?goodsNumbers='+uuid,'',"get",function(data){
                        suixun.hideLoding();//隐藏加载中
                        if(data.code == 200){
                            if(data.info&&ifr_document){
                                //设置标题
                                var goods_image = $(ifr_document).find(".goods-image");//商品编号图片
                                goods_image.html('');
                                for(var j = 0;j<data.info.length;j++){
                                    goods_image.append('<img src='+JSON.parse(data.info[j].smallImg).couponImg+' />');
                                }
                            }
                        }else{
                            suixun.alert(data.msg);
                        }
                    });
                }
            }else{
                suixun.alert(data.msg);
            }
        }.bind(this));
    },
    /**
     * 是否发布
     * @param info[] info[0]id info[1]isshow
     */
    isPublish: function (info) {
        var svar = this,title = '是否显示该文章？',isshow = 1;
        if(info[1]==1){
            title = '是否取消显示该文章？';
            isshow = 0;
        }
        suixun.confirm_noTit(title,function (data) {
            if(data){
                suixun.showLoding();//显示加载中
                suixun.ajax(serverUrl+'/article/getGoods.json?articleId='+info[0],'',"get",function(data) {
                    suixun.hideLoding();//隐藏加载中
                    var uuid = '';
                    if(data.code == 200){
                        if(data.info){
                            for(var j = 0;j<data.info.length;j++){
                                if(uuid.indexOf(data.info[j].uuid)==-1){
                                    uuid += data.info[j].uuid+',';
                                }
                            }
                            uuid = uuid.substring(0,uuid.length-1);
                            svar.changeIsShow(isshow,info[0],uuid);
                        }else{
                            svar.changeIsShow(isshow,info[0],uuid);
                        }
                    }else{
                        suixun.alert(data.msg,function (data) {
                            if(data){
                                svar.changeIsShow(isshow,info[0],uuid);
                            }
                        });
                    }
                }.bind(this));
            }
        });
    },
    /**
     * 是否显示
     */
    changeIsShow: function (isshow,id,goodsNumbers) {
        var svar = this;
        var data = new FormData();
        data.append("isshow",isshow);
        data.append("id",id);
        if(goodsNumbers!=''){
            data.append("goodsNumbers",goodsNumbers);
        }
        suixun.showLoding();//显示加载中
        suixun.ajax(serverUrl+'/article/updateArticle',data,"post",function(data){
            suixun.hideLoding();//隐藏加载中
            if(data.code == 200){
                suixun.alert('操作成功!',function (data) {
                    if(data){
                        svar.onPageClick(currentpage);//更新数据
                    }
                });
            }else{
                suixun.alert(data.msg);
            }
        });
    },
    /**
     * 查询文章评论
     */
    commentReview: function (data) {
        this.setNavigation('评论');
        this.getCommonData(data,1);
        this.setState({trArticle:data});
    },
    /**
     * 设置导航名称
     * @return {XML}
     */
    setNavigation: function (name) {
        this.setState({navigation:name});
        if(name==''){
            otherData.pageLeft = this.state.tablePageData.pageLeft;
            otherData.pageRight = this.state.tablePageData.pageRight;
            totlepage = this.state.tablePageData.totlepage;
            currentpage = this.state.tablePageData.currentpage;
            this.setState({otherData:otherData});
        }
    },
    /**
     * 批量删除评论
     * @return {XML}
     */
    deleteComment: function () {
        var idList="";
        $(".childCheckBox").each(function(i,box) {
            if(box!=null && box.checked)
                idList+=$(box).attr("data-value")+"|";
        });

        if(idList.length>1){
            idList=idList.substring(0,idList.length-1);
        }else{
            suixun.alert("请先选择要删除的评论！");
            return false;
        }
        this.onClickCommentDelete(idList);
    },
    /**
     * 删除评论操作
     * @return {XML}
     */
    onClickCommentDelete: function (commentIds) {
        var svar = this;
        suixun.confirm_noTit('是否确定删除？',function (data) {
            if(data){
                var data = new FormData();
                data.append("commentIds",commentIds);
                suixun.showLoding();//显示加载中
                suixun.ajax(serverUrl+'/article/deleteArticleComments',data,"post",function(data){
                    suixun.hideLoding();//隐藏加载中
                    if(data.code == 200){
                        suixun.alert('操作成功!',function (data) {
                            if(data){
                                svar.onPageClick(currentpage);//更新数据
                            }
                        });
                    }else{
                        suixun.alert(data.msg);
                    }
                });
            }
        });
    },
    /**
     * 是否选择全部
     */
    thCheckbox: function () {
        if($(".checkBox").is(":checked")){
            $(".childCheckBox").prop("checked",true);
        }else{
            $(".childCheckBox").attr("checked",false);
        }
    },
    render: function () {
        {
            var svar = this;
            var onClickArray = [this.onClickEdit,this.onClickDelete,this.onClickSetUp,this.onClickGetArticle,this.onClickNoSetUp,this.isPublish];
            var Tabels = '';
            if(this.state.navigation==''){
                Tabels = this.state.tableData.map(function (data,index) {
                    return (
                        <Table key={data.id} commentReview={this.commentReview.bind(this,data)} onClickEdit={onClickArray[0].bind(svar,[data.id,data.tagId])} isPublish={onClickArray[5].bind(svar,[data.id,data.isshow])} onClickDelete={onClickArray[1].bind(svar,data.id)} onClickSetUp={onClickArray[2].bind(svar,data.id)} onClickGetArticle={onClickArray[3].bind(svar,data.id)} onClickNoSetUp={onClickArray[4].bind(svar,data.id)} listNumber={index} trData={data}/>
                    )
                }.bind(this));
            }else{
                /**
                 * 评论数据
                 */
                Tabels = this.state.commentData.map(function (data,index) {
                    return (
                        <CommentTable key={data.id} onClickCommentDelete={this.onClickCommentDelete.bind(this,data.id)} listNumber={index} trData={data}/>
                    )
                }.bind(this));
            }
            var menuss = this.state.menuData.map(function (data,index) {
                return (
                    <div className={data.select==true?'menu-list select':'menu-list'} onClick={this.onClickMenu.bind(this,data.id)}  ><span>{data.tagname}</span></div>
                )
            }.bind(this));
        }
        return (
            <div className="tableManage-body information-page">
                <div className="preview-layer">
                    <div className="preview-bg"/>
                    <img src="../img/icon/edit_white.png" title="编辑" className="preview_img edit" onClick={this.onClickEdit.bind(svar,[svar.state.informationId])}/>
                    <img src="../img/icon/close_white.png" title="关闭"  className="preview_img close"  />
                    <div className="preview-phone">
                        <iframe id="preview-html" name="preview-html" src="../ueditor/preview-h5.html"/>
                    </div>
                </div>
                <header>
                    <div className="header-left" style={this.state.navigation==''?{display:'none'}:{display:'block'}}>
                        <div style={this.state.navigation!=''?{display:'none'}:{display:'block'}} className='navigation'>文章列表</div>
                        <div style={this.state.navigation==''?{display:'none'}:{display:'block'}} className='navigation selsect' >
                            <a href="javascript:void(0);" onClick={this.setNavigation.bind(this,'')}>文章列表</a><span>>{this.state.navigation}</span>
                        </div>
                    </div>
                    <div className="header-left" style={this.state.navigation!=''?{display:'none'}:{display:'block'}}>
                        <div className="header-left-studentInfo">
                            {/*<a href="../banner/banner.html?type=1" className="header-left-button menu-width " style={{width:'175px'}}>家长端资讯banner管理</a>*/}
                            {/*<a href="../banner/banner.html?type=2" className="header-left-button menu-width ">教师端积分主页banner管理</a>*/}
                            {/*<a href="../banner/banner.html?type=3" className="header-left-button menu-width ">家长端积分主页banner管理</a>*/}
                            <a href="./information.html" className="header-left-button showOrder ">资讯</a>
                        </div>
                    </div>
                    <div className="header-right" style={this.state.navigation==''?{display:'none'}:{display:'block'}}>
                        <div className="header-right-botton" onClick={this.deleteComment.bind(this)}>批量删除</div>
                    </div>
                </header>
                <div className="banner-menu" style={this.state.navigation!=''?{display:'none'}:{display:'block'}}>
                    {
                        menuss
                    }
                    {/*<div className={this.state.informationMenu=='1'?'menu-list select':'menu-list'} onClick={this.onClickMenu.bind(this,1)}  ><span>全部</span></div>*/}
                    {/*<div className={this.state.informationMenu=='2'?'menu-list select':'menu-list'} onClick={this.onClickMenu.bind(this,2)}  ><span>热点</span></div>*/}
                    {/*<div className={this.state.informationMenu=='3'?'menu-list select':'menu-list'} onClick={this.onClickMenu.bind(this,3)}  ><span>亲子</span></div>*/}
                    {/*<div className={this.state.informationMenu=='4'?'menu-list select':'menu-list'} onClick={this.onClickMenu.bind(this,4)}  ><span>亲子</span></div>*/}
                    {/*<div className={this.state.informationMenu=='5'?'menu-list select':'menu-list'} onClick={this.onClickMenu.bind(this,5)}  ><span>亲子</span></div>*/}
                    {/*<div className={this.state.informationMenu=='6'?'menu-list select':'menu-list'} onClick={this.onClickMenu.bind(this,6)}  ><span>国学</span></div>*/}
                    <div className="add-article" onClick={this.onClickAdd.bind(this)}>
                        <img src="../img/icon/add-white.png" alt=""/>
                        <span>发布文章</span>
                    </div>
                </div>
                <div className="tableInfo" >
                    <div className="tableInfo-data">
                        <div className="tableInfo-data-table" >
                            <table className="head-body">
                                {
                                    this.state.navigation==''?
                                        <thead>
                                            <th style={{width: '10%'}}>序号</th>
                                            <th style={{width: '30%'}}>文章标题</th>
                                            <th style={{width: '15%'}}>作者</th>
                                            <th style={{width: '15%'}}>
                                                创建时间
                                                <span className={this.state.orderBy=="asc"?"triangle-up select":"triangle-up "} onClick={this.timeSort.bind(this,'asc')}/>
                                                <span className={this.state.orderBy=="desc"?"triangle-bottom select":"triangle-bottom "} onClick={this.timeSort.bind(this,'desc')}/>
                                            </th>
                                            <th style={{width: '10%'}}>状态</th>
                                            <th style={{width: '20%'}}>操作</th>
                                        </thead>
                                        :
                                            <thead>
                                                <th style={{width: '8%'}}><input type="checkbox" className="checkBox" onClick={this.thCheckbox.bind(this)}/></th>
                                                <th style={{width: '12%'}}>序号</th>
                                                <th style={{width: '15%'}}>评论人</th>
                                                <th style={{width: '20%'}}>评论时间</th>
                                                <th style={{width: '30%'}}>评论内容</th>
                                                <th style={{width: '15%'}}>操作</th>
                                            </thead>
                                }
                                <tbody className="table-select">
                                    {Tabels==""?'':Tabels}
                                </tbody>
                            </table>
                                {Tabels==""?<div className="tableNoData">{tableNoDataCount}</div>:''}
                        </div>
                    </div>
                    <Page otherData={this.state.otherData} onPageClick={this.onPageClick} />
                </div>
                <footer id="copyright">
                    <span><img src="../img/icon/copyright.png"/>{copyright}</span>
                </footer>
            </div>
        );
    }
});
ReactDOM.render(
    <Main  otherData={otherData} />,
    document.getElementById('tableManage')
);